<template>
    <div class="study-details">
        <el-card class="box-card-details" shadow="never">
            <div slot="header" class="clearfix">
                <div class="fl">
                    <span></span>
                    <h3 style="line-height:40px;">档案详情</h3>
                </div>
                <div class="fr">
                    <el-button @click="goback"><i class="el-icon-back"></i>返回</el-button>
                </div>
            </div>
            <div class="study-details-body">
                <ul>
                    <li class="base-info">
                        <h3 class="clearfix">
                            <ele-label title="基本信息" class="fl"></ele-label>
                            <el-button class="fr" @click="addStudyInfo"><i class="el-icon-edit"></i>编辑</el-button>
                        </h3>
                        <table>
                            <tr>
                                <td :rowspan="5" class="img-td">
                                    <img :src="studyInfo.Photo" alt="学生头像">
                                    <p>{{studyInfo.SName}}</p>
                                    <!-- <div>
                                        <el-button @click="addStudyInfo"><i class="el-icon-upload"></i>上传头像</el-button>
                                    </div> -->
                                </td>
                                <td class="label-td">
                                    ID
                                </td>
                                <td class="content-td">
                                    {{studyInfo.FileID || ''}}
                                </td>
                                <td class="label-td">
                                    民族
                                </td>
                                <td class="content-td">
                                    {{studyInfo.Nationality | getNation}}
                                </td>
                            </tr>
                            <tr>
                                <td class="label-td">
                                    年龄
                                </td>
                                <td class="content-td">
                                    {{studyInfo.BirthDate | getAge}}
                                </td>
                                <td class="label-td">
                                    身份证号
                                </td>
                                <td class="content-td">
                                    {{studyInfo.Card || ''}}
                                </td>
                            </tr>
                            <tr>
                                <td class="label-td">
                                    性别
                                </td>
                                <td class="content-td">
                                    {{studyInfo.Sex | getGender}}
                                </td>
                                <td class="label-td">
                                    障碍类别
                                </td>
                                <td class="content-td">
                                    {{studyInfo.Disability_Type | getDisability_Type(DISABILITY)}}
                                </td>
                            </tr>
                            <tr>
                                <td class="label-td">
                                    出生日期
                                </td>
                                <td class="content-td">
                                    {{studyInfo.BirthDate}}
                                </td>
                                <td class="label-td">
                                    户口所在地
                                </td>
                                <td class="content-td">
                                    {{studyInfo.Account}}
                                </td>
                            </tr>
                            <tr>
                                <td class="label-td">
                                    籍贯
                                </td>
                                <td class="content-td">
                                    {{studyInfo.Birthplace}}
                                </td>
                                <td class="label-td">
                                    家庭住址
                                </td>
                                <td class="content-td">
                                    {{studyInfo.Address}}{{studyInfo.Address1}}
                                </td>
                            </tr>
                        </table>
                    </li>
                    <li class="family">
                        <h3 class="clearfix">
                            <ele-label title="家庭情况" class="fl"></ele-label>
                        </h3>
                        <el-table
                            ref="table"
                            :data="familytableData"
                            stripe
                            border
                            style="width: 100%">
                            <el-table-column
                            label="关系"
                            prop="relationship"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                            </el-table-column>
                            <el-table-column
                            prop="phone"
                            label="联系电话"
                            min-width="120">
                            </el-table-column>
                            <el-table-column
                            prop="organization"
                            label="工作单位"
                            min-width="120">
                            </el-table-column>
                            <el-table-column
                            prop="work"
                            label="职务"
                            min-width="120">
                            </el-table-column>
                        </el-table>
                    </li>
                    <li class="school">
                        <h3 class="clearfix">
                            <ele-label title="在校情况" class="fl"></ele-label>
                        </h3>
                        <el-table
                            ref="table"
                            :data="schooltableData"
                            stripe
                            border
                            style="width: 100%">
                            <el-table-column
                            label="入学时间"
                            prop="comein"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            prop="class"
                            label="班级"
                            width="120">
                            </el-table-column>
                            <el-table-column
                            prop="teacher"
                            label="班主任"
                            min-width="120">
                            </el-table-column>
                            <el-table-column
                            prop="organization"
                            label="康复老师"
                            min-width="120">
                            </el-table-column>
                            <el-table-column
                            prop="school"
                            label="在校"
                            min-width="120">
                                <template slot-scope="scope">
                                    <div>
                                        <span v-if="scope.row.school == '1'">在校</span>
                                        <span v-else-if="scope.row.school == '2'">在校</span>
                                        <span v-else>未知</span>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </li>
                    <li class="record">
                        <h3 class="clearfix">
                            <ele-label title="康复记录" class="fl"></ele-label>
                            &nbsp;
                            <el-button size="small" type="primary" @click="addKfjl"><i class=" el-icon-plus"></i> 添加</el-button>
                        </h3>
                        <div class="table">
                            <el-table
                                ref="table"
                                :data="tableData"
                                stripe
                                border
                                style="width: 100%">
                                <el-table-column
                                label="上课时间"
                                prop="ClassTime"
                                width="160">
                                </el-table-column>
                                <el-table-column
                                prop="Rehabilitation"
                                label="康复中心"
                                :show-overflow-tooltip="true"
                                min-width="120">
                                </el-table-column>
                                <el-table-column
                                prop="RehabilitationContent"
                                label="康复内容"
                                :show-overflow-tooltip="true"
                                min-width="200">
                                </el-table-column>
                                <el-table-column
                                prop="Duration"
                                label="课时"
                                width="80">
                                </el-table-column>
                                <el-table-column
                                prop="RehabilitationTeach"
                                label="康复老师"
                                width="120">
                                </el-table-column>
                                <!-- <el-table-column
                                prop="remark"
                                label="备注"
                                min-width="120">
                                </el-table-column> -->
                                <el-table-column
                                label="操作"
                                width="130">
                                    <template slot-scope="scope">
                                        <el-button  @click="handleClickedit(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                                        <el-button  @click="handleClickdelete(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="bottom-pages clearfix">
                                <div class="fr">
                                    <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[10, 20, 30, 40]"
                                    :page-size="pageSize"
                                    :pager-count="5"
                                    layout="total, sizes, prev, pager, next"
                                    :total="count">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="assessmen">
                        <h3 class="clearfix">
                            <ele-label title="评估记录" class="fl"></ele-label>
                            &nbsp;
                            <el-button size="small" type="primary" @click="addAssessmen"><i class=" el-icon-plus"></i> 添加</el-button>
                        </h3>
                        <div class="table">
                            <el-table
                                ref="table"
                                :data="tableDataAssessmen"
                                stripe
                                border
                                style="width: 100%">
                                <el-table-column
                                label="评估时间"
                                prop="AssessmenTime"
                                width="160">
                                </el-table-column>
                                <el-table-column
                                prop="AssessmenContent"
                                label="评估内容"
                                :show-overflow-tooltip="true"
                                min-width="200">
                                </el-table-column>
                                <el-table-column
                                prop="AssessmenMem"
                                label="评语"
                                :show-overflow-tooltip="true"
                                min-width="200">
                                </el-table-column>
                                <el-table-column
                                prop="AssessmenTeach"
                                label="评估人"
                                width="100">
                                    <template slot-scope="scope">
                                        <div>
                                            {{scope.row.AssessmenTeach | getTeacherName(teacherList)}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                label="操作"
                                width="130">
                                    <template slot-scope="scope">
                                        <el-button  @click="handleClickeditAssessmen(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                                        <el-button  @click="handleClickdeleteAssessmen(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="bottom-pages clearfix">
                                <div class="fr">
                                    <el-pagination
                                    background
                                    @size-change="handleSizeChangeAssessmen"
                                    @current-change="handleCurrentChangeAssessmen"
                                    :current-page="currentPageAssessmen"
                                    :page-sizes="[10, 20, 30, 40]"
                                    :page-size="pageSizeAssessmen"
                                    :pager-count="5"
                                    layout="total, sizes, prev, pager, next"
                                    :total="countAssessmen">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </el-card>
        <ele-assessmen ref="assessmen" :bSID="syudyid" :title="assessmenTitle" :teacherlist="teacherList" @addsuccess="getAssessmenList" :eidtinfo="assessmenInfo"></ele-assessmen>
        <ele-k-f-j-l ref="kfjl" :bSID="syudyid" @addsuccess="_getstudyRehabilitationInfo" :eidtinfo="rehabilitationInfo"></ele-k-f-j-l>
        <ele-add-study ref="addstudy" :info="studyInfo" :title="'编辑档案'" :DISABILITY="DISABILITY" @addsuccess="_getStudyInfo"></ele-add-study>
    </div>
</template>

<script>
import eleLabel from './label.vue'
// 添加学生
import eleAddStudy from './add-study.vue';
import eleKFJL from './../home/kfjl.vue';
import {getstudyInfo,getSysInfo,getstudyRehabilitationInfo,deletStudyRehabilitation,getAssessmen,deletAssessmen} from '@/api/index.js'
import eleAssessmen from './add-assessmen.vue'
const studylogo = require('./../../assets/u466.png')
export default {
    name: 'study',
    components: {
        eleLabel,
        eleKFJL,
        eleAddStudy,
        eleAssessmen
    },
    data() {
        return {
            studylogo:studylogo,
            familytableData:[],
            schooltableData:[],
            tableData:[],
            tableDataAssessmen:[],
            currentPage:1,
            count:0,
            pageSize:10,
            currentPageAssessmen:1,
            countAssessmen:0,
            pageSizeAssessmen:10,
            tableSelection:[],
            DISABILITY:[],
            studyInfo:{},
            syudyid:'',
            rehabilitationInfo:'',
            assessmenInfo:"",
            assessmenTitle:'新增'
        }
    },
    created(){
        this.$store.dispatch('getTeacherListAll');
        // 获取要查看的id
        this.syudyid = this.$route.query.id;
        this._getSysInfo();
        if(this.syudyid) {
            this._getStudyInfo();
            this._getstudyRehabilitationInfo();
            this.getAssessmenList();
        }
    },
    computed:{
        teacherList() {
            return this.$store.state.allTeacherList;
        },
        studyList() {
            return this.$store.state.allStudyList;
        }
    },
    methods:{
        _getSysInfo() {
            getSysInfo({bCode_Parent_NO:'DISABILITY'}).then((res) => {
                if(res) {
                    this.DISABILITY = res || [];
                }
            })
        },
        getdata(id) {
            this.syudyid = id;
            this._getStudyInfo();
            this._getstudyRehabilitationInfo();
            this.getAssessmenList();
        },
        _getStudyInfo() {
            getstudyInfo({bSID:this.syudyid}).then((res) => {
                if(res && res.length > 0) {
                    this.studyInfo = res[0];
                    this.familytableData = [
                        {relationship:'父亲',name:this.studyInfo.Name1,phone:this.studyInfo.Mobile1,work:this.studyInfo.Position1,organization:this.studyInfo.Unit1},
                        {relationship:'母亲',name:this.studyInfo.Name2,phone:this.studyInfo.Mobile2,work:this.studyInfo.Position2,organization:this.studyInfo.Unit2},
                        {relationship:'其他',name:this.studyInfo.Name3,phone:this.studyInfo.Mobile3,work:this.studyInfo.Position3,organization:this.studyInfo.Unit3},
                    ];
                    this.schooltableData = [
                        {comein:this.studyInfo.AdmissionTime,class:this.studyInfo.Class,teacher:this.studyInfo.HeadTeacher,organization:this.studyInfo.Teacher,school:this.studyInfo.SchoolStatus}
                    ]
                }
            })
        },
        _getstudyRehabilitationInfo() {
            getstudyRehabilitationInfo({
                bSID:this.syudyid,
                bSName:'', 
                bPage:(this.currentPage - 1) * this.pageSize + 1,
                bPage1:this.currentPage * this.pageSize,
                bSort:'',
                bSx:''}).then((res) => {
                if(res) {
                    this.tableData = res.tableData;
                    this.count = res.total_rows;
                }
            })
        },
        getAssessmenList(){
            getAssessmen({
                bAssessmenTeach:'',
                bSID:this.syudyid,
                bSName:'', 
                bPage:(this.currentPageAssessmen - 1) * this.pageSizeAssessmen + 1,
                bPage1:this.currentPageAssessmen * this.pageSizeAssessmen,
                bSort:'',
                bSx:''}).then((res) => {
                if(res) {
                    this.tableDataAssessmen = res.tableData;
                    this.countAssessmen = res.total_rows;
                }
            })
        },
        onReset(){
            this.$refs.searchform.resetFields()
        },
        handleSelectionChange(row){
            console.log(row)
            this.tableSelection = row;
        },
        handleSizeChange(val){
            this.pageSize = val;
            this._getstudyRehabilitationInfo()
        },
        handleCurrentChange(val){
            this.currentPage = val;
            this._getstudyRehabilitationInfo()
        },
         handleSizeChangeAssessmen(val){
            this.pageSizeAssessmen = val;
            this.getAssessmenList()
        },
        handleCurrentChangeAssessmen(val){
            this.currentPageAssessmen = val;
            this.getAssessmenList()
        },
        // 添加评估记录
        addAssessmen(){
            this.assessmenInfo = null;
            this.assessmenTitle = '新增';
            this.$refs.assessmen.dialogVisible = true;
        },
        // 编辑评估记录
        handleClickeditAssessmen(row){
            this.assessmenTitle = '编辑';
            this.assessmenInfo = row;
            this.$refs.assessmen.dialogVisible = true;
        },
        // 删除
        handleClickdeleteAssessmen(row){
            this.$util.openTips.call(this,'是否确定删除？')
            .then((res) => {
                deletAssessmen({bSRID:row.SRID}).then((res) => {
                    this.$util.tipsMsg('success','删除成功！');
                    this.getAssessmenList();
                }).catch((err) => {})
            }).catch((err) => {
                console.log(err)
            })
        },
        // 添加康复记录
        addKfjl(){
            this.rehabilitationInfo = null;
            this.$refs.kfjl.dialogVisible = true;
        },
        // 编辑康复记录
        handleClickedit(row){
            this.rehabilitationInfo = row;
            this.$refs.kfjl.dialogVisible = true;
        },
        // 删除
        handleClickdelete(row){
            this.$util.openTips.call(this,'是否确定删除？')
            .then((res) => {
                deletStudyRehabilitation({bSRID:row.SRID}).then((res) => {
                    this.$util.tipsMsg('success','删除成功！');
                    this._getstudyRehabilitationInfo();
                }).catch((err) => {})
            }).catch((err) => {
                console.log(err)
            })
        },
        // 返回页面
        goback(){
            this.$router.push({path:'study'})
        },
        // 添加学生
        addStudyInfo(){
            this.$refs.addstudy.dialogVisible = true;
        }
    }
}
</script>
<style lang="less">
.study-details{
    .box-card-details{
        .el-card__header{
            padding: 10px 20px;
            line-height: 40px;
        }
    }
    .base-info{
        margin-bottom:10px;
        table{
            width:100%;
            .label-td{
                width:130px;
                text-align: right;
                background-color: #FAFAFA;
            }
            .img-td{
                background-color: #FAFAFA;
                img{
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                }
            }
            .content-td{
                text-align: left;
                min-width: 180px;
            }
            td{
                border:1px solid #EBEEF5;
                line-height: 40px;
                height:40px;
                padding:0 8px;
            }
        }
    }
    h3{
        line-height: 60px;
    }
}
</style>
